<template>
  <div class="flex-center">
    <!-- 用户类型 -->
    <selectWithoutHttp
      v-model="item.userType"
      :list-data="userTypeList"
      class="width-120 mr10"
      placeholder="请选择条件类型"
      @change="changeUserType" />

    <!-- 选择部门 usetType: 2-->
    <DeptSelect
      v-if="item.userType === 2"
      v-model="item.valueData"
      :element="handelElement()"
      class="width-240" />
    <!-- 自定义人员 usetType: 0-->
    <SelectUser
      v-else-if="item.userType === 0"
      v-model="item.valueData"
      :default-value="item.valueData"
      class="width-240"
      multiple />
    <!-- 3:角色组 或 4:BP类型-->
    <selectWithoutHttp
      v-else-if="item.userType === 3 || item.userType === 4"
      v-model="item.valueData"
      :list-data="item.userType === 3?roleGroupList:BPList"
      :placeholder="`请选择${item.userType === 3?'角色组':'BP类型'}`"
      :item-max-width="240"
      :key-name="item.userType === 3?'id':'name'"
      filterable
      class="width-240"
      label-name="name"
      multiple
      clearable />
  </div>
</template>
<script>
// data
import { userTypeList } from '@/utils/const/process';
import { mapState } from 'vuex';
// components
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import DeptSelect from '@/views/legal/process/components/formMake/components/deptSelect.vue';
import SelectUser from '@/components/Common/baseComponent/selectUser/index';
export default {
  name: 'UserField',
  components: { selectWithoutHttp, DeptSelect, SelectUser },
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      userTypeList: userTypeList
    };
  },
  computed: {
    ...mapState({
      'BPList': state => state.formMake.BPList, // BP 类型
      'roleGroupList': state => state.formMake.roleGroups // 角色组
    })
  },
  methods: {
    changeUserType() {
      this.item.valueData = [];
    },
    handelElement() {
      const el = {
        type: 'department',
        options: {
          selectChild: true,
          multiple: true,
          placeholder: '请选择部门'
        }
      };
      return el;
    }
  }
};
</script>
<style lang="scss" scoped>
.width-120 {
  width: 120px;
  &::v-deep {
    .el-input__inner {
      width: 120px;
    }
  }
}
.width-240 {
  width: 240px;
  &::v-deep {
    .el-input__inner {
      width: 240px;
    }
  }
}
.mr10 {
  margin-right: 10px;
}
</style>
